<template>
	<div ref="chartDistri" :style="{height, width}"></div>
</template>
<script lang="ts">
	import {defineComponent, onMounted, PropType, ref, Ref, reactive, watchEffect} from 'vue';
	import {useECharts} from '/@/hooks/web/useECharts';
	import {cloneDeep} from 'lodash-es';
	export default defineComponent({
		name: 'bar',
		props: {
			chartData: {
				type: Array,
				default: () => [],
			},
			option: {
				type: Object,
				default: () => ({}),
			},
			width: {
				type: String as PropType<string>,
				default: '100%',
			},
			barLed: {
				type: Object,
				default: {
					xLine: '#666',
					label: '#7d8590',
					lineColorBegin: '#41a3ff',
					lineColorEnd: '#41a3ff',
					xUnit: '',
					yUnit: '充电量（万度）',
					dataLabel: true,
				},
			},
			height: {
				type: String as PropType<string>,
				default: '280px',
			},
			// update-begin--author:liaozhiyang---date:20240407---for：【QQYUN-8762】首页默认及echars颜色调整
			seriesColor: {
				type: String,
				default: '#1890ff',
			},
			// update-end--author:liaozhiyang---date:20240407---for：【QQYUN-8762】首页默认及echars颜色调整
		},
		setup(props) {
			const chartDistri = ref<HTMLDivElement | null>(null);
			const {setOptions, resize, echarts} = useECharts(chartDistri as Ref<HTMLDivElement>);
			onMounted(() => {
				window.addEventListener('resize', function () {
					resize();
				});
			});

			let legend = props.chartData.map((item) => {
				return item.name;
			});
			let seriesData = props.chartData;
			let barLed = props.barLed;
			const option = reactive({
				grid: {
					top: '15%',
					left: 30,
					right: '16%',
					bottom: 50,
					// containLabel: true,
				},
				tooltip: {show: true},
				xAxis: {
					name: barLed.xUnit,
					nameTextStyle: {
						color: barLed.label,
						fontSize: 12,
						top: 50,
						left: 4,
					},

					left: '-40px',
					data: ['业务', '业务', '业务', '业务', '业务、业务', '业务', '业务'],
					axisLabel: {
						interval: 0,
						textStyle: {
							color: barLed.label,
							fontSize: 12,
						},
					},
					axisLine: {
						show: true,
					},
					axisTick: {
						show: false,
					},
				},
				yAxis: {
					name: barLed.yUnit,
					left: '-40px',

					// name: "单位:次",
					nameTextStyle: {
						color: barLed.label,
						fontSize: 12,
						top: 40,
					},
					axisLabel: {
						formatter: '{value}',
						textStyle: {
							color: barLed.label,
							fontSize: 12,
						},
					},
					splitLine: {
						show: false,
						lineStyle: {
							color: barLed.xLine,
						},
					},
					axisLine: {
						show: false,
					},
					axisTick: {
						show: false,
					},
				},
				series: [
					{
						type: 'bar',
						barWidth: 20,
						name: '充电次数',
						itemStyle: {
							normal: {
								borderRadius: 3,

								color: new echarts.graphic.LinearGradient(
									0,
									0,
									0,
									1,
									[
										{
											offset: 0,
											color: barLed.lineColorBegin,
										},
										{
											offset: 1,
											color: barLed.lineColorEnd, //'#f3faf9',
										},
									],
									false
								),
								// shadowColor: '#f3faf9',
								// shadowBlur: 10
							},
						},
						label: {
							normal: {
								show: barLed.dataLabel,
								fontSize: 12,
								fontWeight: 'normal',
								color: '#ffffff',
								position: 'top',
							},
						},
						data: [254, 3254, 1654, 2454, 4757, 2011, 1211],
					},
				],
			});

			watchEffect(() => {
				props.chartData && initCharts();
			});

			function initCharts() {
				if (props.option) {
					Object.assign(option, cloneDeep(props.option));
				}
				let seriesData = props.chartData.map((item) => {
					return item.value;
				});
				let xAxisData = props.chartData.map((item) => {
					return item.name;
				});
				option.series[0].data = seriesData;
				// option.series[1].data = seriesData;
				// update-begin--author:liaozhiyang---date:20240407---for：【QQYUN-8762】首页默认及echars颜色调整
				// option.series[0].color = props.seriesColor;
				// update-end--author:liaozhiyang---date:20240407---for：【QQYUN-8762】首页默认及echars颜色调整
				option.xAxis.data = xAxisData;
				setOptions(option);
			}
			return {chartDistri};
		},
	});
</script>
